﻿<!DOCTYPE html>

<html

        xmlns:th="http://www.thymeleaf.org">

<!--      xmlns:th="http://www.w3.org/1999/xhtml" -->

<!--      xmlns="http://www.w3.org/1999/html"-->





<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>用户登录</title>

    <style>
        html{
            overflow-x: hidden;
            overflow-y: hidden;
        }

        body {

            width: 100%;

            height: 100%;

            margin: 0;

            box-sizing: border-box;

        }



        .container {

            width: 100%;

            height: 100%;

            display: flex;

            flex-direction: column;

            align-items: center;

        }

        .logo_S{

            width: 100%;

            height: 50px;

            padding-left: 20px;

            padding-top: 5px;

            box-sizing: border-box;

        }

        .box {

            flex: 1;

            box-shadow: 0 0 10px 0 rgb(0 0 0 / 14%);

            border-radius: 4px 0 0 4px;

            display: flex;

        }

        .background_box{

            width: 100%;

            height:100%;

            position: relative;

        }

        .background_image{
            width: 100%;
            height:100%;
        }

        .background_img{
            position: absolute;
            /* width: 21%; */
            left: 400px;

            top: 200px;

        }



        /* .box-img, .box-login {

            flex: 1;

            background: #f7f8fa;

        } */



        .box-img {

            display: flex;

            flex-direction: column;

            position: absolute;

            left: 30%;

            top: 200px;

        }

        .box-login{

            width: 400px;

            height: 360px;

            background: #f7f8fa;

            position: absolute;

            left: 54%;

            top: 300px;

            padding: 20px 30px;
            box-sizing: border-box;

        }

        .box-logo {

            flex: 3;

            display: flex;

            justify-content: center;

            align-items: center;

        }



        .box-bg {

            flex: 4;

        }



        .input-name {

            background-color: #FFF;

            background-image: none;

            border-radius: 4px;

            border: 1px solid #DCDFE6;

            outline: 0;

        }



        input {

            border: 1px solid #ccc;

            padding: 7px 0px;

            width: 95%;

            border-radius: 3px;

            padding-left: 5px;

            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;

            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

            transition: border-color ease-in-out  .15s, box-shadow ease-in-out .15s

        }



        input:focus {

            border-color: #66afe9;

            outline: 0;

            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);

            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)

        }



        .ant-btn {

            line-height: 1.499;

            position: relative;

            display: inline-block;

            font-weight: 400;

            white-space: nowrap;

            text-align: center;

            background-image: none;

            border: 1px solid transparent;

            -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);

            box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);

            cursor: pointer;

            -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);

            transition: all .3s cubic-bezier(.645, .045, .355, 1);

            -webkit-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user-select: none;

            -ms-touch-action: manipulation;

            touch-action: manipulation;

            height: 32px;

            padding: 0 15px;

            font-size: 14px;

            border-radius: 4px;

            color: rgba(0, 0, 0, 0.65);

            background-color: #fff;

            border-color: #d9d9d9;

        }



        .ant-btn-primary {

            color: #fff;
            height: 40px;
            background-color: #1890ff;

            border-color: #1890ff;
            border-radius: 0;

            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

            -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);

            box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);

        }



        .title {

            font-size: 26px;

            font-weight: bold;

            color: #000;

            margin: 40px auto;

            text-align: center;

            padding: 20px 0

        }

        .forget_password{

            color: #1973EE;
            margin-top: 10px;
            font-size: 12px;

        }

        .kuang{

            position: relative;

            height: 40px;

            border-radius: 5px;

        }

        .kuang input{

            position: absolute;

            top: 0;

            /* left: 20px; */

            /* height: 100%; */
            height: 34px;
            width: 320px;

            /* font-size: 18px; */

            outline: none;

            /* border: none; */

            background-color:transparent;

            padding-left: 32px;
            border-radius: 0;
            background-color: #fff;
        }

        .kuang input::placeholder{

            color: #B6B6B6;
            background-color: #fff;



        }

        .conceal{

            position: absolute;

            top:7px;

            right: 25px;

            width: 20px;

            height: 20px;

            /*background-image: url(./image/eye_open_ico.png);*/

            background-size: 100% 100%;

            cursor: pointer;

        }

        .conceal.yincang{

            /*background-image: url(./image/eye_close_ico.png);*/

            background-size: 100% 100%;

        }

        .conceal_user{

            position: absolute;

            top:5px;

            left: 6px;

            width: 20px;

            height: 20px;
            z-index: 999;
            /* background-image: url(./image/eye_open_ico.png);

             */

            background-size: 100% 100%;

            cursor: pointer;

        }

        .user_title{

            font-size: 20px;

            font-weight: bold;

            margin-bottom: 10px;

        }
        .keep_record{
            height: 100px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .keep_record_title{
            font-size: 14px;
            height: 60px;
            width: 100%;
            border-top: 1px solid #D8D8D8;
            text-align: center;
            line-height: 36px;
            color: #2B333E;
        }
    </style>

</head>



<body>

<div class='container'>

    <div class="logo_S">
         <img th:src="@{/login_logo_ico.png}">
<!--        <img src="./image/login_logo_ico.png">-->
    </div>

    <div class='box'>

        <div class="background_box">

            <img class="background_image" th:src="@{/login_bg_img.png}">
            <!-- <img class="background_image" src="./image/login_bg_img.png"> -->

            <img class="background_img" th:src="@{/login_bg_ico.png}">
            <!-- <img class="background_img" src="./image/login_bg_ico.png"> -->
            <div class='box-login'>

                <div class="user_title">账号登录</div>

                <div class='form'>

                    <form name="f" id="login-from" action="/login" method="post">

                        <br/>

                        <!-- <img src="/" alt="">

                        <input type="text" name="username" id="login-username" placeholder="账号"  onchange="onChange()" style="border:none"><br/> -->

                        <div class="kuang">

                            <div class="conceal_user" id='conceal_user'>

                                <img th:src="@{/user_icon.png}" alt="">
                                <!-- <img src="./image/user_icon.png" alt=""> -->

                            </div>

                            <input type="text" placeholder="账号" id='login-username' name="username" onchange="onChange()">

                        </div>

                        <br/>

                        <!-- <input type="password" name="password" id="login-password" placeholder="密码" onchange="onChange()" style="border:none"><br/> -->

                        <div class="kuang">

                            <div class="conceal_user" id='conceal_pass'>

                                <img th:src="@{/pass_icon.png}" alt="">
                                <!-- <img src="./image/pass_icon.png" alt=""> -->

                            </div>

                            <input type="password" name="password" placeholder="密码" id='login-password' onchange="onChange()" >

                            <div class="conceal" id='conceal'></div>

                        </div>

                        <br/>

                        <h4 class="forget_password">忘记密码?</h4>

                        <input class='ant-btn ant-btn-primary' name="submit" type="submit" value="登录">

                    </form>

                    <p th:if="${#strings.trim(param.error) eq 'passError'}" style="color: red">账号或密码错误，请联系管理员！</p>

                    <p th:if="${#strings.trim(param.error) eq 'lockError'}" style="color: red">账户被锁定，请联系管理员！</p>

                    <p th:if="${#strings.trim(param.error) eq 'creError'}" style="color: red">证书过期，请联系管理员！</p>

                    <p th:if="${#strings.trim(param.error) eq 'accError'}" style="color: red">账户过期，请联系管理员！</p>

                    <p th:if="${#strings.trim(param.error) eq 'abledError'}" style="color: red">账户被禁用，请联系管理员！</p>

                    <p th:if="${#strings.trim(param.error) eq 'error'}" style="color: red">登录失败，请联系管理员！</p>

                </div>

                <div class='btn'></div>

            </div>

        </div>
    </div>
    <div class="keep_record">
        <div style="height: 50px;"></div>
        <div class="keep_record_title">Copyright © 2022 成都任小满科技有限责任公司 蜀ICP备2020028018号 </div>
    </div>

</div>

</body>



<script type="text/javascript">

    function onChange(){

        // document.getElementById('login-password').value = "";

        var ps = document.getElementsByTagName('p');

        console.log(ps);

        if(ps.length>0){

            ps[0].remove();

        }

    }

    var password = document.getElementById('login-password');

    var anniu = document.getElementById('conceal');

    anniu.innerHTML = '<img src="../eye_close_ico.png">'
    // anniu.innerHTML = '<img src="./image/eye_open_ico.png">'

    anniu.addEventListener('click',function(){

        if(password.type==='password')

        {

            password.setAttribute('type','text');

            anniu.innerHTML = '<img src="../eye_open_ico.png">'
            // anniu.innerHTML = '<img src="./image/eye_close_ico.png">'

        }else{

            password.setAttribute('type','password');

            anniu.innerHTML = '<img src="../eye_close_ico.png">'
            // anniu.innerHTML = '<img src="./image/eye_open_ico.png">'
        }

    })

</script>

</html>